<template>
    <div class="homes">
        <mLoading :showLoading="showLoading"></mLoading>
        <div class="contents-box">
            <div class="title-img">
                <van-icon class="back-icon" name="arrow-left" color="#ffffff" @click="onClickLeft" />

                <div class="time-img">
                    <div class="time-title">{{"截至时间:" +showTime}}</div>
                </div>
            </div>


            <div class="city-content">
                <div v-for="(item, index) in cityListData" :key="index" @click="itemClick(item)">
                    <div class="back-img">
                        <div class="title">{{item.kpiName}}</div>
                        <div class="all-title">{{'全省' + item.kpiValue + "%"}}</div>
                        <img class="zhuhe-img" src="../../assets/q2Markert/icon_q2_item_zhuhe_new.png" />
                        <div class="value-item" v-for="(iitem, iIndex) in item.cityOrder" :key="iIndex">
                            <div class="value-content">
                                <div v-if="iIndex <= 2" class="city-title">{{"TOP." + iitem.orders + iitem.areaName}}
                                    <div class="value-title">{{iitem.kpiValue + '%'}}</div>
                                </div>
                                <div v-else class="city-title">{{iitem.areaName}}
                                    <div class="value-title">{{iitem.kpiValue + '%'}}</div>
                                </div>
                            </div>
                            <img class="line-img" v-if="iIndex == 2" src="../../assets/q3Markert/fb_1.png" />
                            <img class="jiayou-img" v-if="iIndex == 2" src="../../assets/q2Markert/icon_q2_item_jiayou_new.png" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="county-content" @click="itemClick(countryItem, 'county')">
                <img class="county-img" src="../../assets/q3Markert/qxgs.png" />
                <div class="county-back-img">
                    <div class="title" style="width:100%;">{{countryItem.kpiName}}</div>
                    <div style="width:100%; margin:20px; display: flex; justify-content: center;">
                        <img class="zhuhe-img" src="../../assets/q2Markert/icon_q2_item_zhuhe_new.png" />
                    </div>
                    <!-- 前十视图 -->
                    <div class="county-qianshi">
                        <div class="county-title" v-for="(item, index) in countryItem.cityOrder" v-show="index <= 9" :key="index">
                            <div class="county-order-img" :class="'county-order-img' + index">{{item.orders}}</div>
                            <div class="county-value">
                                {{item.areaName}}
                                <div class="value-title">{{item.kpiValue + '%'}}</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <img style="height:2px; margin: 10px;" src="../../assets/q3Markert/fb_1.png" />
                    </div>
                    <div>
                        <img style="height:30px" src="../../assets/q2Markert/icon_q2_item_jiayou_new.png" />
                    </div>
                    <!-- 后十视图 -->
                    <div class="county-houshi" style="display:flex; flex-wrap:wrap; width:100%">
                        <div class="county-title" style="width:44%; font-size: 16px; margin-left: 20px; border-bottom:2px solid #427CE7;" v-for="(item, index) in countryItem.cityOrder" v-show="index > 9" :key="index">
                            <div class="county-order-img" :class="'county-order-img' + index">{{item.orders}}</div>
                            <div class="county-value" style="font-size: 15px;">
                                {{item.areaName}}
                                <div class="value-title">{{item.kpiValue + '%'}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-button" @click="reportDetailClick">报表详情</div>
        <div class="circle" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="divDom">
            <circleEcharts :index="1" titleName="三季度营销" currentQuarterDays="92" preQuarterDays="181" />
        </div>
    </div>
</template>

<script>
import "@/api/index"
import { ref, reactive, toRefs, onMounted } from "vue"
import { mapGetters } from "vuex"
import GetNetUtil from "@/utils/GetNetUtil"
import store from "@/store/index"
import { useRouter } from "vue-router"
import circleEcharts from "@/components/circleEcharts.vue"
import mLoading from "@/components/mLoading.vue"
export default {
    components: {
        circleEcharts,
        mLoading
    },
    //监听属性 类似于data概念
    computed: {
        ...mapGetters(["user4a", "token", "isAdmin"])
    },
    setup() {
        let params_login = reactive({
            password: "C86038FE04BC7097E218B4FD6B767F4B",
            imei: "0fc2ecdd5127aebbcc9e1196e3f89ec73bdd4823",
            user4A: "gaoyu11",
            appType: "0",
            version: "44"
        })
        let params_list = reactive({
            token: "",
            user4a: ""
        })
        let params_role = reactive({
            token: "",
            moduleUrl: "",
            user4a: "",
            moduleToken: ""
        })
        const state = reactive({
            startDate: "",
            endDate: "",
            moduleCode: "",
            showTime: "",
            positionX: 0,
            positionY: 0,
            showLoading: false,
            cityListData: [],
            countryListData: [],
            countryItem: {},
            // ordersStyles:[],
            flags: false, //控制使用
            position: {
                x: 0,
                y: 0
            },
            nx: "",
            ny: "",
            dx: "",
            dy: "",
            xPum: "",
            yPum: ""
        })
        const divDom = ref(null)
        function down(event) {
            state.flags = true
            var touch
            if (event.touches) {
                touch = event.touches[0]
            } else {
                touch = event
            }
            state.position.x = touch.clientX
            state.position.y = touch.clientY
            state.dx = divDom.value.offsetLeft
            state.dy = divDom.value.offsetTop
        }
        function move(event) {
            if (state.flags) {
                var touch
                if (event.touches) {
                    touch = event.touches[0]
                } else {
                    touch = event
                }
                state.nx = touch.clientX - state.position.x
                state.ny = touch.clientY - state.position.y
                state.xPum = state.dx + state.nx
                state.yPum = state.dy + state.ny
                let width = window.innerWidth - divDom.value.offsetWidth //屏幕宽度减去自身控件宽度
                let height = window.innerHeight - divDom.value.offsetHeight //屏幕高度减去自身控件高度
                state.xPum < 0 && (state.xPum = 0)
                state.yPum < 0 && (state.yPum = 0)
                state.xPum > width && (state.xPum = width)
                state.yPum > height && (state.yPum = height)
                // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
                divDom.value.style.left = state.xPum + "px"
                divDom.value.style.top = state.yPum + "px"
                // }
                //阻止页面的滑动默认事件
                document.addEventListener(
                    "touchmove",
                    function () {
                        // event.preventDefault()
                    },
                    false
                )
            }
        }
        //鼠标释放时候的函数
        function end() {
            state.flags = false
        }
        async function getOnBoardListAsync() {
            state.showLoading = true
            GetNetUtil.requestPost(_const.loginApi, "", params_login, getColumn)
        }

        async function getColumn(data) {
            state.showLoading = false
            // dev
            store.commit("setToken", data.data.token)
            store.commit("setUser4a", data.data.userInfo.user4A)
            store.commit("setAreaId", data.data.areaInfo.areaId)
            store.commit("setAreaName", data.data.areaInfo.areaName)
            params_list.token = data.data.token
            params_list.user4a = data.data.userInfo.user4A
            params_login.user4A = data.data.userInfo.user4A
            const params_column = {
                token: data.data.token,
                user4a: data.data.userInfo.user4A,
                codes: "74"
            }
            GetNetUtil.requestPost(
                _const.moudleDate,
                "",
                params_column,
                getDate
            )
            // dev
        }
        async function getCommonRoleJsonData() {
            GetNetUtil.requestPost(
                _const.commonRoleUrl,
                "",
                params_role,
                getRole
            )
        }
        async function getRole(data) {
            console.log(data)
            if (data.status == 0) {
                getOnBoardListAsyncProd()
            }
        }
        function getOnBoardListAsyncProd() {
            state.showLoading = true
            const params_column = {
                ...params_list,
                codes: state.moduleCode
            }
            GetNetUtil.requestPost(
                _const.moudleDate,
                "",
                params_column,
                getDate
            )
        }
        function GetQueryJson() {
            let url = window.location.href.split("?")[1]
            let arr = [] //存储参数的数组
            let res = {} //存储最终JSON结果对象
            arr = url.split("&") //获取浏览器地址栏中的参数
            for (let i = 0; i < arr.length; i++) {
                //遍历参数
                let decodeArr = decodeURIComponent(arr[i])
                if (decodeArr.indexOf("$") != -1) {
                    //如果参数中有值
                    let str = decodeArr.split("$")
                    res[str[0]] = GetNetUtil.decryptDes(str[1])
                } else {
                    //如果参数中无值
                    res[decodeArr] = ""
                }
            }
            return res
        }
        async function getDate(data) {
            state.showLoading = false
            state.endDate = data.data[0].endDate
            state.startDate = data.data[0].startDate
            state.showTime = formatTitleDate(data.data[0].endDate)
            const params = {
                token: params_list.token,
                user4a: params_list.user4a,
                dayCode: state.endDate
            }
            console.log(params)
            GetNetUtil.requestPost(_const.holidayQ2ListUrl, "", params, getList)
        }

        async function getList(result) {
            const data = result.data
            state.cityListData = data.cityList
            if (data.countyList.length <= 0) return
            state.countryListData = data.countyList
            state.countryItem = data.countyList[0]
        }

        //时间格式化
        function formatTitleDate(date) {
            let month = date.substr(4, 2)
            let day = date.substr(6, 2)
            if (month.indexOf("0") === 0) {
                month = month.substr(1, 1)
            }
            if (day.indexOf("0") === 0) {
                day = day.substr(1, 1)
            }
            return date.substr(0, 4) + "年" + month + "月" + day + "日"
        }

        function onClickLeft() {
            window.location.href = "@closePage/closePage"
        }

        //跳转到下一级页面
        const router = useRouter()
        function itemClick(item, type = "city") {
            console.log(item)
            localStorage.setItem("q2Item", JSON.stringify(item))
            router.push({
                name: "q3MarketBar",
                params: {
                    kpiName: item.kpiName,
                    kpiCode: item.kpiCode,
                    startDate: state.startDate,
                    endDate: state.endDate,
                    token: params_list.token,
                    user4A: params_list.user4a,
                    type: type
                }
            })
        }

        function reportDetailClick() {
            router.push({
                name: "q3MarketDetails",
                params: {
                    token: params_list.token,
                    user4A: params_list.user4a
                }
            })
        }

        onMounted(() => {
            //prod
            let queryJson = GetQueryJson()
            console.log("queryJson", queryJson)
            let areaId = queryJson.areaId
            let areaName = queryJson.areaName
            let areaLevel = parseInt(queryJson.areaLevel)
            let token = queryJson.token
            let user4a = queryJson.user4a
            let userId = queryJson.userId
            let isSelfAdmin = queryJson.isSelfAdmin
            let moduleToken = queryJson.moduleToken
            let moduleUrl = queryJson.moduleUrl
            let moduleCode = queryJson.moduleCode
            // let from = GetQueryString("from")
            params_list.token = token
            params_list.user4a = user4a
            // store.commit("setFrom", from)

            params_role.token = token
            params_role.user4a = user4a
            params_role.moduleToken = moduleToken
            params_role.moduleUrl = moduleUrl

            state.moduleCode = moduleCode

            store.commit("setAreaId", areaId)
            store.commit("setAreaName", areaName)
            store.commit("setAreaLevel", areaLevel)
            store.commit("setToken", token)
            store.commit("setUser4a", user4a)
            store.commit("setUserId", userId)
            store.commit("setIsSelfAdmin", isSelfAdmin)
            //prod
            getCommonRoleJsonData()
            //dev
            // getOnBoardListAsync()
            //dev
        })
        return {
            ...toRefs(params_login),
            ...toRefs(params_list),
            ...toRefs(state),
            ...toRefs(params_role),
            formatTitleDate,
            move,
            down,
            end,
            divDom,
            getRole,
            onClickLeft,
            itemClick,
            reportDetailClick
        }
    }
}
</script>

<style lang="scss" scoped>
.homes {
    width: 100%;
    height: 100%;
    background: #eaeaea;
    // overflow: auto;
    overflow: hidden;
    .contents-box {
        width: 100%;
        height: calc(100% - 54px);
        overflow-y: auto;
        background: #427ce7;
    }
    .contents-box::-webkit-scrollbar {
        width: 0;
    }
    .title-img {
        background: url("../../assets/q3Markert/toubu_bg.png") no-repeat 0 0;
        background-size: 100% 100%;
        height: 376px;
        width: 100%;

        .back-icon {
            margin-top: 30px;
            margin-left: 20px;
        }
    }

    .time-img {
        display: flex;
        // position:absolute;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-top: 250px;

        .time-title {
            background: url("../../assets/q3Markert/time_bg.png") no-repeat 0 0;
            background-size: 100% 100%;
            height: 34px;
            width: 250px;
            font-size: 18px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .content-part {
        background: #eaeaea;
        font-size: 14px;
        .item-part {
            height: 36px;
            line-height: 36px;
            background: #ffffff;
            border-radius: 2px;
            padding-left: 5px;
            margin: 10px;
        }
    }

    .city-content {
        padding: 0 10px;
        .back-img {
            background: url("../../assets/q3Markert/neirong_tb2.png") no-repeat
                0 0;
            background-size: 100% 100%;
            height: 376px;
            width: 100%;
            overflow: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
    }

    .title {
        font-size: 18px;
        color: #ffffff;
        text-align: center;
    }

    .all-title {
        font-size: 16px;
        color: #427ce7;
        text-align: center;
        margin-top: 20px;
    }

    .zhuhe-img {
        width: 50%;
    }

    .value-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .jiayou-img {
            width: 30%;
        }

        .value-content {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
            .city-title {
                font-size: 16px;
                color: #427ce7;
                display: flex;
            }

            .value-title {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .line-img {
            width: 60%;
            margin: 10px;
        }
    }

    .county-value-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .jiayou-img {
            width: 30%;
        }

        .value-content {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
            .city-title {
                font-size: 16px;
                color: #427ce7;
                display: flex;
            }

            .value-title {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .line-img {
            width: 60%;
            margin: 10px;
        }
    }

    .county-content {
        // margin: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        align-items: center;
        .county-img {
            width: 60%;
        }

        .county-back-img {
            margin-top: 20px;
            background: url("../../assets/q3Markert/neirong_tb3.png") no-repeat
                0 0;
            background-size: 100% 100%;
            height: 760px;
            width: 100%;
            display: flex;
            // flex-wrap: wrap;
            justify-content: center;
            flex-direction: column;
            // justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            margin-bottom: 10px;

            .county-title {
                // background: url("../../assets/q2Markert/icon_q2_quxian_back.png")
                // no-repeat 0 0;
                // background-size: 100% 100%;
                font-size: 16px;
                color: #427ce7;
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 40px;
                width: 280px;
                .county-order-img {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // background: url("../../assets/q2Markert/rank_1.png")
                    // no-repeat 0 0;
                    // background-size: 100% 100%;
                    width: 30px;
                    height: 30px;
                    background-color: #427ce7;
                    border-radius: 15px;
                    color: #ffffff;
                }

                .county-order-img0 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: url("../../assets/q2Markert/rank_1.png")
                        no-repeat 0 0;
                    background-size: 100% 100%;
                    width: 30px;
                    height: 30px;
                }

                .county-order-img1 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: url("../../assets/q2Markert/rank_2.png")
                        no-repeat 0 0;
                    background-size: 100% 100%;
                    width: 30px;
                    height: 30px;
                }

                .county-order-img2 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: url("../../assets/q2Markert/rank_3.png")
                        no-repeat 0 0;
                    background-size: 100% 100%;
                    width: 30px;
                    height: 30px;
                }
                .county-value {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80%;
                }
            }

            .county-qianshi {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .footer-button {
        height: 54px;
        width: 100%;
        background: #427ce7;
        color: #ffffff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle {
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 999;
    }
}
</style>